<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="督办通知" />
    <van-form @submit="onSubmit" label-width="1.8rem" :show-error="false">
      <van-field required label="督办类型">
        <template #input>
          <van-radio-group v-model="formData.superHandleType" direction="horizontal">
            <van-radio checked-color="#136cc9" name="1">反馈</van-radio>
            <van-radio checked-color="#136cc9" name="2">评价</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <template v-if="formData.superHandleType === '1'">
        <van-field label="督办对象" required>
          <template #input v-if="formData.superHandleType === '1'">
            <div class="unit-group">
              <van-checkbox
                icon-size="18px"
                checked-color="#136cc9"
                class="check-all"
                v-model="checkedAll"
                name="a"
                shape="square">
                全选
              </van-checkbox>
              <van-field name="checkedOrgs" :rules="[{ required: true, message: '请选择督办对象' }]">
                <template #input v-if="formData.superHandleType === '1'">
                  <!-- {{ formData.checkedOrgs }} -->
                  <van-checkbox-group v-model="formData.checkedOrgs" ref="checkboxGroup" direction="horizontal">
                    <van-checkbox
                      checked-color="#136cc9"
                      v-for="item in orgs"
                      :key="item.obj"
                      :name="item.obj"
                      shape="square"
                      icon-size="18px">
                      {{ item.objName }}
                    </van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
            </div>
          </template>
        </van-field>
      </template>
      <template v-if="formData.superHandleType === '2'">
        <van-field
          readonly
          clickable
          name="nperName"
          required
          :value="formData.nperName"
          label="评价周期"
          placeholder="请选择"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择评价周期' }]"
          right-icon="arrow" />
        <van-field
          v-show="evalChainInfo"
          readonly
          v-model="evalChainInfo"
          label="评价链"
          placeholder="请先选择评价周期"></van-field>
      </template>

      <van-field
        required
        v-model="formData.superHandleContent"
        name="通知内容"
        label="通知内容"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入督办通知内容' }]"
        rows="4"
        autosize
        type="textarea"
        maxlength="200"
        show-word-limit />
      <div class="btn-group">
        <van-button round block color="#004db6" native-type="submit">保 存</van-button>
      </div>
    </van-form>
    <!-- 评价周期 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        title="评价周期"
        :columns="evalCycleNperList"
        value-key="name"
        @confirm="onConfirm"
        @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script>
import { getEvalCycleNper, getEvalChainUser } from '../common/common.js'
import { listTaskState, saveSuperhandle, listEvaulationedChainInfo, listEvaulationCycleNper } from '@api/api-task.js'

export default {
  name: 'ReminderNoticeAdd',
  components: {},
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      showPicker: false,
      orgs: [], // 任务的主办和协办单位
      formData: {
        nperId: '',
        nperName: '',
        taskId: '',
        superHandleType: '1', // 1反馈 2评价
        objInfos: [],
        checkedOrgs: [],
      },
      evalCycleNperList: [], // 评价周期
      evalChainInfoList: [], // 评价链
      evalChainInfo: '',
    }
  },
  computed: {
    evaluationState() {
      return data => {
        return getEvalCycleNper(data)
      }
    },
    evaluationState1() {
      return data => {
        return getEvalChainUser(data)
      }
    },
    checkedAll: {
      get() {
        return this.formData.checkedOrgs.length === this.orgs.length && this.formData.checkedOrgs.length !== 0
      },
      set(val) {
        this.$refs.checkboxGroup.toggleAll(val)
      },
    },
  },
  watch: {
    'formData.superHandleType'(newVal) {
      if (newVal === '1') {
        this.formData.nperId = ''
        this.formData.nperName = ''
        this.evalChainInfo = ''
      }
    },
  },
  created() {},
  mounted() {
    this.formData.taskId = this.id
    this.initdata()
    this.initEvalCycleNper()
  },
  methods: {
    /* 督办单位 */
    async initdata() {
      const { data = [] } = await listTaskState({ taskId: this.id })
      this.orgs = [...data]
    },
    /* 提交数据 */
    onSubmit() {
      if (this.formData.checkedOrgs.length) {
        const objInfos = []
        this.orgs.forEach(item => {
          if (this.formData.checkedOrgs.includes(item.obj)) {
            objInfos.push({
              objId: item.obj,
              objName: item.objName,
              objType: 2, // 1人员 2机构
            })
          }
        })
        this.formData.objInfos = [...objInfos]
      }
      saveSuperhandle({
        ...this.formData,
      }).then(res => {
        if (res.code === 0) {
          this.$toast.success('承办人，保存成功')
          this.goback()
        }
      })
    },
    /* 获取评价周期 */
    async initEvalCycleNper() {
      const { data = [] } = await listEvaulationCycleNper({ taskId: this.id })
      this.evalCycleNperList = data.map(item => {
        item.name = `${item.desc}（${this.evaluationState(item.evaluationState)}）`
        return item
      })
    },
    /* 确认选中的周期 */
    onConfirm(value) {
      if (!value) {
        return
      }
      const { nperId = '', name = '' } = value
      this.formData.nperId = nperId
      this.formData.nperName = name
      this.initEvalChainInfo()
      this.showPicker = false
    },
    /* 获取被评价单位 */
    async initEvalChainInfo() {
      const { data = [] } = await listEvaulationedChainInfo({ taskId: this.id, nperId: this.formData.nperId })
      // this.evalChainInfoList = data
      const chainInfo = data[data.length - 1]
      this.evalChainInfo = `${chainInfo.userName}（${this.evaluationState1(chainInfo.evaluationState)}）`
    },
    /* 返回上一页 */
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.page_padding {
  background: #f7f7f7;
}
.unit-group {
  border-radius: px2rem(20);
  /deep/.van-cell {
    padding: 0;
  }
}
/deep/.van-checkbox-group {
  font-size: $fontSize32;
}
/deep/.van-checkbox--horizontal {
  margin-right: 12px;
  margin-bottom: 12px;
}
/deep/.van-radio--horizontal {
  margin-right: 12px;
}
/deep/.check-all {
  margin-bottom: 18px;
  font-size: $fontSize32;
}
/deep/.van-cell {
  padding: 10px 16px;
}
.btn-group {
  margin: px2rem(30);
}
</style>
